<template>
  <view class="exam-container">
    <view class="exam-header">
      <text class="title">线上考试</text>
      <text class="subtitle">ONLINE EXAM</text>
    </view>
    <view class="exam-content">
      <view class="exam-item">
        <text class="exam-title">护理管理能力提升考核</text>
        <view class="exam-info-row">
          <view class="info-box">
            <text class="info-label">时长</text>
            <text class="info-value">90分钟</text>
          </view>
          <view class="info-box">
            <text class="info-label">题目</text>
            <text class="info-value">50道</text>
          </view>
          <view class="info-box">
            <text class="info-label">总分</text>
            <text class="info-value">100分</text>
          </view>
        </view>
        <text class="exam-desc">本次考试旨在检验参会人员对护理管理相关知识的掌握情况，考核内容包括护理质量管理、人力资源管理、风险管理等。</text>
        <view class="status-box status-ready">
          <text class="status-text">可参加</text>
          <text class="time-text">开放时间：2024-11-08 14:00 - 16:00</text>
        </view>
        <button class="start-btn" @tap="handleStart">开始考试</button>
      </view>
      
      <view class="exam-item">
        <text class="exam-title">护理新技术应用测评</text>
        <view class="exam-info-row">
          <view class="info-box">
            <text class="info-label">时长</text>
            <text class="info-value">60分钟</text>
          </view>
          <view class="info-box">
            <text class="info-label">题目</text>
            <text class="info-value">30道</text>
          </view>
          <view class="info-box">
            <text class="info-label">总分</text>
            <text class="info-value">100分</text>
          </view>
        </view>
        <text class="exam-desc">本次测评主要考察参会人员对护理新技术、新方法的了解程度和应用能力。</text>
        <view class="status-box status-waiting">
          <text class="status-text">未开始</text>
          <text class="time-text">开放时间：2024-11-09 09:00 - 11:00</text>
        </view>
        <button class="start-btn disabled" disabled>暂未开放</button>
      </view>
      
      <view class="decoration-circle circle-1"></view>
      <view class="decoration-circle circle-2"></view>
      <view class="decoration-circle circle-3"></view>
    </view>
  </view>
</template>

<script setup lang="ts">
const handleStart = () => {
  uni.showToast({
    title: '考试功能开发中',
    icon: 'none'
  })
}
</script>

<style lang="scss">
.exam-container {
  min-height: 100vh;
  background-color: #e6f1fc;
  position: relative;
  overflow: hidden;
  
  .exam-header {
    background: linear-gradient(135deg, #1e88e5, #1565c0);
    padding: 40rpx 32rpx;
    
    .title {
      color: #ffffff;
      font-size: 36rpx;
      font-weight: 500;
      display: block;
      margin-bottom: 8rpx;
    }
    
    .subtitle {
      color: rgba(255, 255, 255, 0.8);
      font-size: 20rpx;
      display: block;
      letter-spacing: 2rpx;
    }
  }
  
  .exam-content {
    padding: 24rpx;
    position: relative;
    
    .exam-item {
      background: #ffffff;
      border-radius: 12rpx;
      padding: 32rpx;
      margin-bottom: 24rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
      position: relative;
      z-index: 2;
      
      .exam-title {
        font-size: 32rpx;
        color: #333;
        font-weight: 600;
        display: block;
        margin-bottom: 24rpx;
      }
      
      .exam-info-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 24rpx;
        
        .info-box {
          text-align: center;
          
          .info-label {
            font-size: 24rpx;
            color: #999;
            display: block;
            margin-bottom: 8rpx;
          }
          
          .info-value {
            font-size: 28rpx;
            color: #00866a;
            font-weight: 600;
          }
        }
      }
      
      .exam-desc {
        font-size: 26rpx;
        color: #666;
        line-height: 1.6;
        display: block;
        margin-bottom: 24rpx;
      }
      
      .status-box {
        background: #f8f8f8;
        padding: 16rpx;
        border-radius: 8rpx;
        margin-bottom: 24rpx;
        
        &.status-ready {
          border-left: 6rpx solid #00866a;
        }
        
        &.status-waiting {
          border-left: 6rpx solid #1e88e5;
        }
        
        .status-text {
          font-size: 26rpx;
          color: #333;
          font-weight: 600;
          display: block;
          margin-bottom: 8rpx;
        }
        
        .time-text {
          font-size: 24rpx;
          color: #666;
        }
      }
      
      .start-btn {
        background: #00866a;
        color: #ffffff;
        font-size: 30rpx;
        border-radius: 40rpx;
        
        &:active {
          opacity: 0.8;
        }
        
        &.disabled {
          background: #ccc;
          color: #fff;
        }
      }
    }
    
    .decoration-circle {
      position: absolute;
      border-radius: 50%;
      z-index: 1;
      
      &.circle-1 {
        width: 300rpx;
        height: 300rpx;
        background: rgba(0, 134, 106, 0.05);
        top: -120rpx;
        right: -100rpx;
      }
      
      &.circle-2 {
        width: 200rpx;
        height: 200rpx;
        background: rgba(30, 136, 229, 0.05);
        bottom: 80rpx;
        left: -80rpx;
      }
      
      &.circle-3 {
        width: 160rpx;
        height: 160rpx;
        background: rgba(0, 134, 106, 0.08);
        bottom: 200rpx;
        right: -60rpx;
      }
    }
  }
}
</style> 